<template>
	<div class="shujugailan">
		<div class="tianshu">
			<div class="tianshu1">
				<ul>
					<li>近7天</li>
					<li>近30天</li>
					<li>近90天</li>
				</ul>
			</div>
			<div class="tianshu2">
				<span>数据更新：</span>
				<span>2020-11-01 04:00:00</span>
			</div>
		</div>
		
		<div class="gaishuju">
			<table cellpadding="0" cellspacing="0">
				<tr>
					<td>概要数据</td>
					<td>
						<div>
							<img src="../../../../assets/img/gai1.png" />新增粉丝
						</div>
						<div>
							{{shu | guolv}}
						</div>
					</td>
					<td>
						<div>
							<img src="../../../../assets/img/gai2.png" />新增作品
						</div>
						<div>
							{{shu | guolv}}
						</div>
					</td>
					<td>
						<div>
							<img src="../../../../assets/img/gai3.png" />新增点赞
						</div>
						<div>
							{{shu | guolv}}
						</div>
					</td>
				</tr>
				<tr>
					<td>作品重点数据</td>
					<td>
						<div>
							<img src="../../../../assets/img/dianzan3.png" />中位点赞数
						</div>
						<div>
							{{shu | guolv}}
						</div>
					</td>
					<td>
						<div>
							<img src="../../../../assets/img/gai4.png" />中位评论数
						</div>
						<div>
							{{shu | guolv}}
						</div>
					</td>
					<td>
						<div>
							<img src="../../../../assets/img/gai5.png" />中位分享数
						</div>
						<div>
							{{shu | guolv}}
						</div>
					</td>
				</tr>
				<tr>
					<td>带货作品重点数据</td>
					<td>该时间段内未发布带货作品</td>
				</tr>
				<tr>
					<td>带货商品重点数据</td>
					<td>
						<div>
							<img src="../../../../assets/img/ying1.png" />主营品类：
						</div>
						<div>美食饮品<span>18.56%</span></div>
						<div>休闲食品<span>9.62%</span></div>
					</td>
					<td colspan="2">
						<div>
							<img src="../../../../assets/img/ying2.png" />主营价格区间：
						</div>
						<div>0-50元<span>30.26%</span></div>
						<div>100-300元<span>22.51%</span></div>
					</td>
				</tr>
			</table>
		</div>
	
		<div class="shipinbiaoxian">
			<div class="shouye_tou1">
				<span>近10个视频表现</span>
			</div>
			<div id="c1"></div>
			<h3 class="beizhu">
				人生这么辛苦，我...超好东西,超低价... 老罗暴力补贴特卖... "省钱不是这么省的...没了？？？？？...为中国设计点赞。...作为抖音带货一哥...电暖气诞生至今已...让直播间“哇哇”...这次必须来点狠的...
			</h3>
		</div>
		
		<div class="shipinbiaoxian1">
			<div class="waicengqu">
				<div class="shouye_tou2">
					<span>粉丝趋势</span>
				</div>
				<div class="bianhua">
					<div class="bianhua1">
						<ul>
							<li>30天</li>
							<li>90天</li>
						</ul>
					</div>
					<div class="bianhua2">
						<ul>
							<li>增量</li>
							<li>总量</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div id="c2"></div>
			<h3 class="beizhu1">
				注：如粉丝趋势出现负值，表明有部分用户 取消了关注
			</h3>
		</div>
		
		<div class="shipinbiaoxian1">
			<div class="waicengqu">
				<div class="shouye_tou2">
					<span>点赞趋势</span>
				</div>
				<div class="bianhua">
					<div class="bianhua1">
						<ul>
							<li>30天</li>
							<li>90天</li>
						</ul>
					</div>
					<div class="bianhua2">
						<ul>
							<li>增量</li>
							<li>总量</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div id="c3"></div>
			<h3 class="beizhu1">
				注：如粉丝趋势出现负值，表明有部分用户 取消了关注
			</h3>
		</div>
	</div>
</template>

<script>
	import { Chart } from '@antv/g2';
	export default{
		name:"shujugailan",
		data(){
			return{
				shu:12332,
				tuZonggao:'',
				tudata:[
					{ company: '点赞', type: '10.29', value: 2000 },
					{ company: '评论', type: '10.29', value: 18700 },
					
					{ company: '点赞', type: '10.30', value: 4000 },
					{ company: '评论', type: '10.30', value: 7870 },
					
					{ company: '点赞', type: '10.31', value: 9785 },
					{ company: '评论', type: '10.31', value: 17854 },
					
					{ company: '点赞', type: '11.01', value: 5676 },
					{ company: '评论', type: '11.01', value: 2000 },
					
					{ company: '点赞', type: '11.02', value: 2300},
					{ company: '评论', type: '11.02', value: 200 },
					
					{ company: '点赞', type: '11.03', value: 2300 },
					{ company: '评论', type: '11.03', value: 2001 },
					
					{ company: '点赞', type: '11.04', value: 2387 },
					{ company: '评论', type: '11.04', value: 2045 },
					
					{ company: '点赞', type: '11.05', value: 2145 },
					{ company: '评论', type: '11.05', value: 7856 },
					
					{ company: '点赞', type: '11.06', value: 12544 },
					{ company: '评论', type: '11.06', value: 18754 },
					
					{ company: '点赞', type: '11.07', value: 18745 },
					{ company: '评论', type: '11.07', value: 2544 },
					
				],
				
				tudata1:[
					  { month: '10-03', city: '粉丝', temperature: 5634 },
					  { month: '10-04', city: '粉丝', temperature: 3452 },
					  { month: '10-05', city: '粉丝', temperature: 12134 },
					  { month: '10-06', city: '粉丝', temperature: 5672 },
					  { month: '10-07', city: '粉丝', temperature: 15324 },
					  { month: '10-08', city: '粉丝', temperature: 2342 },
					  { month: '10-09', city: '粉丝', temperature: -1562 },
					  { month: '10-10', city: '粉丝', temperature: 13412 },
					  { month: '10-11', city: '粉丝', temperature: 20585 },
					  { month: '10-12', city: '粉丝', temperature: 18455 },
					  { month: '10-13', city: '粉丝', temperature: 12423 },
					  { month: '10-14', city: '粉丝', temperature: 16342 },
					  { month: '10-15', city: '粉丝', temperature: 20467 },
					  { month: '10-16', city: '粉丝', temperature: 2455 },
					  { month: '10-17', city: '粉丝', temperature: -2000 },
					  { month: '10-18', city: '粉丝', temperature: 2543 },
					  { month: '10-19', city: '粉丝', temperature: 1234 },
					  { month: '10-20', city: '粉丝', temperature: 2342 },
					  { month: '10-21', city: '粉丝', temperature: -3000 },
					  { month: '10-22', city: '粉丝', temperature: 20422 },
					  { month: '10-23', city: '粉丝', temperature:  19647},
					  { month: '10-24', city: '粉丝', temperature: -2000 },
					  { month: '10-25', city: '粉丝', temperature: 20545 },
					  { month: '10-26', city: '粉丝', temperature: 1234 },
				],
				
				tudata2:[
					{ month: '10-03', city: '点赞', temperature: -2000 },
					  { month: '10-04', city: '点赞', temperature: 14674 },
					  { month: '10-05', city: '点赞', temperature: 342 },
					  { month: '10-06', city: '点赞', temperature: 6543 },
					  { month: '10-07', city: '点赞', temperature: -1586 },
					  { month: '10-08', city: '点赞', temperature: 20553 },
					  { month: '10-09', city: '点赞', temperature: 1234 },
					  { month: '10-10', city: '点赞', temperature: 4462 },
					  { month: '10-11', city: '点赞', temperature: 2342 },
					  { month: '10-12', city: '点赞', temperature: 14576 },
					  { month: '10-13', city: '点赞', temperature: 19526 },
					  { month: '10-14', city: '点赞', temperature: 1354 },
					  { month: '10-15', city: '点赞', temperature: 5345 },
					  { month: '10-16', city: '点赞', temperature: 9075 },
					  { month: '10-17', city: '点赞', temperature: -3000 },
					  { month: '10-18', city: '点赞', temperature: 8074 },
					  { month: '10-19', city: '点赞', temperature: 19544 },
					  { month: '10-20', city: '点赞', temperature: 11252 },
					  { month: '10-21', city: '点赞', temperature: 5685 },
					  { month: '10-22', city: '点赞', temperature: 2642 },
					  { month: '10-23', city: '点赞', temperature: 8463},
					  { month: '10-24', city: '点赞', temperature: 1234 },
					  { month: '10-25', city: '点赞', temperature: 5843 },
					  { month: '10-26', city: '点赞', temperature: 20658 },
				]
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		mounted(){
			//图标1近10个视频表现
			
			this.tuZonggao=document.body.offsetWidth*0.3;
			console.log(this.tuZonggao)
			
			$(window).resize(()=>{
				this.tuZonggao=document.body.offsetWidth*0.2;
			})
			
			this.tubiao1();
			this.tubiao2();
			this.tubiao3();
			
			$(".bianhua1 ul li").click(function(){
				$(this).css({
					'background-color': '#0091FF',
					'color': '#fff',
					'border': '1px solid #0091FF',
				})
				$(this).siblings().css({
					'background-color': '#fff',
					'color': '#0091FF',
					'border': '1px solid #D4D4D4',
				})
			})
			
			$(".bianhua2 ul li").click(function(){
				$(this).css({
					'background-color': '#0091FF',
					'color': '#fff',
					'border': '1px solid #0091FF',
				})
				$(this).siblings().css({
					'background-color': '#fff',
					'color': '#0091FF',
					'border': '1px solid #D4D4D4',
				})
			})
			
			$(".tianshu1 ul li").click(function(){
				$(this).css({
					'color': '#fff',
					'background-color': '#0091FF',
					'border': '1px solid #0091FF',
				})
				$(this).siblings().css({
					'color': '#0091FF',
					'background-color': '#fff',
					'border': '1px solid #D4D4D4',
				})
			})
		},
		methods:{
			tubiao1(){
				const chart = new Chart({
				  container: 'c1',
				  autoFit: true,
				  height: this.tuZonggao,
				});
				
				chart.data(this.tudata);
				
				chart.scale('value', {
					ticks: [0, 5000,10000,15000,20000],
					alias: '销售量',
				});
				chart.axis('value',{
					title:{
						style:{
							fill:"#666666",
						}
					}
				});
				
				chart.legend({
				  position: 'top'
				});//显示色块的位置
				
				chart.tooltip({
					showMarkers:false,
					shared:true
				});
				
				chart
				  .interval()
				  .position('type*value').color('company')
				  .adjust([{
				    type: 'dodge',
				    marginRatio: 0
				  }]);
				
				chart.render();
			},
			
			tubiao2(){
				const chart = new Chart({
				  container: 'c2',
				  autoFit: true,
				  height: this.tuZonggao,
				});
				
				chart.data(this.tudata1);
				chart.scale('temperature',{
				  ticks:[-3000,0,3000,6000,9000,12000,15000,18000,21000]
				});
				
				chart.tooltip({
				  showCrosshairs: true,
				  shared: true,
				});
				
				chart.axis('temperature', {
				  label: {
				    formatter: (val) => {
				      return val + ' ';
				    },
				  },
				});
				
				chart.legend({
					position:'top'
				});
				
				chart
				  .line()
				  .position('month*temperature')
				  .color('city')
				  .label('temperature')
				  .shape('smooth');
				
				chart
				  .point()
				  .position('month*temperature')
				  .color('city')
				  .shape('circle')
				  .style({
				    stroke: '#fff',
				    lineWidth: 1,
				  });
				
				chart.render();
			},
			
			tubiao3(){
				const chart = new Chart({
				  container: 'c3',
				  autoFit: true,
				  height: this.tuZonggao,
				});
				
				chart.data(this.tudata2);
				chart.scale('temperature',{
				  ticks:[-3000,0,3000,6000,9000,12000,15000,18000,21000]
				});
				
				chart.tooltip({
				  showCrosshairs: true,
				  shared: true,
				});
				
				chart.axis('temperature', {
				  label: {
				    formatter: (val) => {
				      return val + ' ';
				    },
				  },
				});
				
				chart.legend({
					position:'top'
				});
				
				chart
				  .line()
				  .position('month*temperature')
				  .color('city')
				  .shape('smooth');
				
				chart
				  .point()
				  .position('month*temperature')
				  .color('city')
				  .shape('circle')
				  .style({
				    stroke: '#fff',
				    lineWidth: 1,
				  });
				
				chart.render();
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shujugailan{
		
		.tianshu{
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 1.5rem 1.5rem;
			
			.tianshu1{
				flex: 1;
				ul{
					list-style: none;
					display: flex;
					li{
						cursor: pointer;
						float: left;
						border: 1px solid #D4D4D4;
						color: #0091FF;
						font-size: 0.4rem;
						text-align: center;
						padding: 0.1rem 0.3rem;
					}
					li:nth-of-type(1){
						color: #fff;
						background-color: #0091FF;
						border: 1px solid #0091FF;
						border-right:none ;
					}
					li:nth-of-type(2){
						border-right:none ;
						border-left:none ;
					}
				}
			}
			
			.tianshu2{
				text-align: right;
				display: flex;
				span:nth-of-type(1){
					color: #333333;
					font-size: 0.4rem;
					display: block;
				}
				span:nth-of-type(2){
					color: #999;
					font-size: 0.4rem;
					display: block;
				}
			}
		}
		
		.gaishuju{
			background-color: #fff;
			padding: 0 1.5rem;
			margin-bottom:1rem ;
			
			table{
				width: 100%;
				
				td{
					padding-bottom:1.5rem ;
					color: #333;
					font-size:0.4rem ;
					
					div:nth-of-type(1){
						display: inline;
						margin-right:1rem ;
						
						img{
							vertical-align:middle;
							width: 0.5rem;
							margin-right:0.3rem ;
						}
					}
					div:nth-of-type(2){
						display: inline;
					}
				}
				tr:nth-of-type(2){
					color: #333;
					font-size:0.4rem ;
					
					span:nth-of-type(1){
						i{
							font-size: 0.55rem;
							color: #999999;
							margin-right:0.3rem ;
						}
						margin-right:1rem ;
					}
					span:nth-of-type(2){
						color: #F65F4B;
					}
					td:nth-of-type(2){
						span:nth-of-type(2){
							color: #2CC5AA;
						}
					}
				}
				tr:nth-of-type(3){
					td:nth-of-type(2){
						color: #999999;
					}
				}
				tr:nth-of-type(4){
					td:nth-of-type(2){
						width: 11rem;
						div{
							float: left;
							i{
								font-size: 0.55rem;
								color: #999999;
								margin-right:0.3rem ;
							}
							span{
								color: #0091FF;
								margin-left:0.1rem ;
							}
						}
					}
					td:nth-of-type(3){
						width: 11rem;
						div{
							float: left;
							i{
								font-size: 0.55rem;
								color: #999999;
								margin-right:0.3rem ;
							}
							span{
								color: #0091FF;
								margin-left:0.1rem ;
							}
						}
					}
				}
			}
			
			
		}
		
		.shipinbiaoxian{
			background-color: #fff;
			padding: 0.6rem 1.5rem;
			border-radius:0.1rem ;
			margin-top:1rem ;
			
			.shouye_tou1{
				height: 100%;
				box-sizing: border-box;
				position: relative;
				margin-bottom:0.8rem ;
				
				span{
					font-weight: 600;
					font-size: 0.5rem;
					display: inline-block;
					margin-left:0.8rem ;
					margin-top:0.8rem ;
				}
				
				span::before{
					content: "";
					display: block;
					position: absolute;
					top: 0.6rem;
					left: 0;
					width: 0.3rem;
					height: 1rem;
					background-color: #1890FF;
				}
			}
			.shouye_tou1::after{
				content: "";
				display: block;
				clear: both;
			}
			.beizhu{
				color: #0091FF;
				font-size: 0.35rem;
				text-align: center;
				padding: 0.8rem 0;
				letter-spacing: 0.03rem;
				font-weight: normal;
			}
		}
		
		.shipinbiaoxian1{
			background-color: #fff;
			padding: 0.6rem 1.5rem;
			border-radius:0.1rem ;
			margin-top:1rem ;
			
			.waicengqu{
				margin-bottom:0.8rem ;
				.shouye_tou2{
					height: 100%;
					float: left;
					box-sizing: border-box;
					position: relative;
					margin-bottom:0.8rem ;
					
					span{
						font-weight: 600;
						font-size: 0.5rem;
						display: inline-block;
						margin-left:0.8rem ;
						margin-top:0.8rem ;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: 0.6rem;
						left: 0;
						width: 0.3rem;
						height: 1rem;
						background-color: #1890FF;
					}
				}
				.bianhua{
					float: right;
					display: flex;
					align-items: center;
					padding-top:0.6rem ;
					
					.bianhua1{
						ul{
							list-style: none;
							
							li{
								cursor: pointer;
								float: left;
								color: #0091FF;
								border:1px solid #D4D4D4 ;
								font-size: 0.4rem;
								padding: 0.1rem 0.3rem;
							}
							li:nth-of-type(1){
								background-color: #0091FF;
								color: #fff;
								border: 1px solid #0091FF;
							}
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
					.bianhua2{
						margin-left:1rem ;
						ul{
							list-style: none;
							
							li{
								cursor: pointer;
								float: left;
								color: #0091FF;
								border:1px solid #D4D4D4 ;
								font-size: 0.4rem;
								padding: 0.1rem 0.3rem;
							}
							li:nth-of-type(1){
								background-color: #0091FF;
								color: #fff;
								border: 1px solid #0091FF;
							}
							
						}
						ul::after{
							content: "";
							display: block;
							clear: both;
						}
					}
				}
			}
			.waicengqu::after{
				content: "";
				display: block;
				clear: both;
			}
			.beizhu1{
				color: #999999;
				font-weight: normal;
				font-size: 0.35rem;
				text-align: center;
				padding: 0.8rem 0;
				letter-spacing: 0.03rem;
			}
		}
	}
</style>
